<template>
    <div style="display: flex;height: 100%" :class="divs[activeIndex]" class="test">
        <el-container>
            <el-aside :width="size">
                <el-menu style="margin-left: 0px;margin-right: 0px" router :unique-opened="true"
                         background-color="rgba(256,256,256,.0)"
                >
                    <el-menu-item class="el-submenu_title" key="ICT通信双创工作室" index="/home">
                        <template slot="title">
                            <el-image :src="iconUrl" fit="fill" style="width: 32px;height: 32px"></el-image>
                            <span style="color: rgba(256,256,256,.7);font-size: 16px;margin-left: 8px;font-style: italic">通信 Studio</span>
                        </template>
                    </el-menu-item>
                    <el-submenu class="el-submenu_title" v-for="(item,index) in routes" :key="index" :index="item.name"
                                v-if="item.name!='个人中心'">
                        <template slot="title"><i :class="item.icocls" style="color: white;margin-right: 15px"></i>
                            <span style="color: rgba(256,256,256,.7);font-size: 16px;">{{item.name}}</span>
                        </template>
                        <el-menu-item class="menu-item" v-for="(child,indexj) in item.children" :key="indexj"
                                      :index="child.path">
                            <span style="color: rgba(256,256,256,.7);font-size: 16px;">{{child.name}}</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="header">
                        <div style="margin-top: 8px;margin-left: 10px">
                            <div v-if="this.$router.currentRoute.path=='/home'">
                                <span style="color: rgba(256,256,256,.7);font-size: 16px;font-weight: bold;font-family: 宋体">首页</span>
                            </div>
                            <el-breadcrumb separator="丨"
                                           v-if="this.$router.currentRoute.path!='/home'">
                                <el-breadcrumb-item :to="{ path: '/home' }">
                                    首页
                                </el-breadcrumb-item>
                                <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>
                        <div style="margin-top: 10px;margin-right: 15px;display: flex;">
                            <div style="margin-top: 8px;margin-right: 15px">
                                <el-badge :value="usersRead" :max="99" :hidden="usersRead===0" style="margin-right: 10px">
                                    <el-tooltip class="item" effect="dark" content="消息" placement="bottom">
                                        <el-button size="small" icon="el-icon-bell" circle plain type="info"
                                                   @click="goChat()"></el-button>
                                    </el-tooltip>
                                </el-badge>
                                <el-tooltip class="item" effect="dark" content="切换上一张壁纸" placement="bottom">
                                    <el-button size="small" icon="el-icon-back" circle plain type="info"
                                               @click="handleBg(-1)"></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="切换下一张壁纸" placement="bottom">
                                    <el-button size="small" icon="el-icon-right" circle plain type="info"
                                               @click="handleBg(1)"></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="解锁" placement="bottom" v-if="lock">
                                    <el-button size="small" icon="fa fa-lock" circle plain type="info"
                                               @click="lockBg"></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="锁定此壁纸" placement="bottom" v-else>
                                    <el-button size="small" icon="fa fa-unlock" circle plain type="info"
                                               @click="lockBg"></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="隐藏组件" placement="bottom" v-if="!flag">
                                    <el-button size="small" icon="fa fa-eye" circle plain type="info"
                                               @click="flag=!flag"></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="显示组件" placement="bottom" v-else>
                                    <el-button size="small" icon="fa fa-eye-slash" circle plain type="info"
                                               @click="flag=!flag"></el-button>
                                </el-tooltip>
                            </div>
                            <div>
                                <!--                                <el-avatar :src=user.avatar></el-avatar>-->
                                <el-dropdown @command="handleCommand">
                                    <!--                                    <i style="color: white" class="el-icon-caret-bottom"></i>-->
                                    <el-avatar :src=user.avatar></el-avatar>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="userCenter">个人中心</el-dropdown-item>
                                        <el-dropdown-item divided command="logout">注销登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </div>
                </el-header>
                <el-main>
                    <div v-if="this.$router.currentRoute.path=='/home' && !flag">
                        <HelloWorld/>
                    </div>
                    <router-view class="routerview" v-if="!flag"/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    import {mapState} from 'vuex'

    export default {
        name: 'Home',
        components: {
            HelloWorld
        },
        data() {
            return {
                fileList: [],
                user: {
                    name: '',
                    phone: '',
                    telephone: '',
                    address: '',
                    avatar: '',
                },
                timer: null,
                divs: [
                    'test1',
                    'test3',
                    'test4',
                    'test5',
                    'test6',
                    'test7',
                    'test8',
                    'test9',
                    'test10',
                    'test11',
                    'test12',
                    'test13',
                    'test14',
                    'test15',
                    'test16',
                    'test17',
                    'test18',
                    'test19',
                    'test20',
                ],
                activeIndex: Math.floor(Math.random() * 100),
                flag: false,
                lock: false,
                iconUrl: require('../img/ICT_logo2.png'),
                isCollapse: false,
                size: '200px'
            }
        },
        computed: {
            usersRead() {
                let v = 0
                for(let r in this.$store.state.usersRead){
                    if(this.$store.state.usersRead[r]>0){
                        v += this.$store.state.usersRead[r]
                    }
                }
                return v
            },
            routes() {
                return this.$store.state.routes
            },
            files: function () {
                if (this.fileList) {
                    if (this.fileList.length > 0) {
                        this.user.avatar = URL.createObjectURL(this.fileList[0].raw);
                    }
                }
            }
        },
        mounted() {
            this.user = JSON.parse(window.sessionStorage.getItem("user"));
            this.bgInterval()
        },
        methods: {
            goChat() {
                if (this.$router.currentRoute.fullPath !== '/chat') {
                    this.$router.push('/chat')
                }
            },
            handleCommand(cmd) {
                // alert(cmd)
                if (cmd == 'logout') {
                    this.$confirm('是否要注销登录', '确认注销', {
                        distinguishCancelAndClose: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '放弃注销登录'
                    })
                        .then(() => {
                            this.getRequest('/logout');
                            window.sessionStorage.removeItem('user');
                            this.$store.commit("initRoutes", []);
                            this.$router.replace('/')
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '放弃注销登录'
                            })
                        });
                }
                if (cmd == 'userCenter') {
                    this.$router.replace('/userCenter')
                }
            },
            bgInterval() {
                var _this = this;
                _this.activeIndex %= _this.divs.length
                this.timer = setInterval(() => {
                    _this.activeIndex = (this.activeIndex + 1) % this.divs.length
                }, 1000 * 600);
            },
            handleBg(n) {
                if (n < 0) {
                    // console.log(this.activeIndex)
                    this.activeIndex = (this.activeIndex + this.divs.length - 1) % this.divs.length
                } else {
                    // console.log(this.activeIndex)
                    this.activeIndex = (this.activeIndex + 1) % this.divs.length
                }
                // this.bgInterval()
            },
            lockBg() {
                this.lock = !this.lock
                if (this.lock) {
                    clearInterval(this.timer)
                    this.timer = null
                } else {
                    this.bgInterval()
                }
            },
            handleChange() {
                if (this.isCollapse) {
                    this.size = '200px';
                } else {
                    this.size = '50px';
                }
                this.isCollapse = !this.isCollapse
            }
        },
        beforeDestroy() {
            clearInterval(this.timer)
            this.timer = null
        }
    }

</script>

<style>
    .test {
        background-position: center;
        background-size: cover;
        /*position: absolute;*/
        height: 100%;
        width: 100%;
    }

    .test1 {
        background-image: url("../img/wallhaven-01x839_1920x1080.png");
    }


    .test3 {
        background-image: url("../img/wallhaven-43qm36_1920x1080.png");
    }

    .test4 {
        background-image: url("../img/wallhaven-4ymyy7_1920x1080.png");
    }

    .test5 {
        background-image: url("../img/wallhaven-43lwg3_1920x1080.png");
    }

    .test6 {
        background-image: url("../img/wallhaven-d52jqg_1920x1080.png");
    }

    .test7 {
        background-image: url("../img/wallhaven-d57w33_1920x1080.png");
    }

    .test8 {
        background-image: url("../img/wallhaven-nmmvvk_1920x1080.png");
    }

    .test9 {
        background-image: url("../img/wallhaven-qdlzj7_1920x1080.png");
    }

    .test10 {
        background-image: url("../img/wallhaven-zx22jg_1920x1080.png");
    }

    .test11 {
        background-image: url("../img/5.jpg");
    }

    .test12 {
        background-image: url("../img/7.jpg");
    }

    .test13 {
        background-image: url("../img/8.jpg");
    }

    .test14 {
        background-image: url("../img/17.jpg");
    }

    .test15 {
        background-image: url("../img/19.jpg");
    }

    .test16 {
        background-image: url("../img/20.jpg");
    }

    .test17 {
        background-image: url("../img/22.jpg");
    }

    .test18 {
        background-image: url("../img/27.jpg");
    }

    .test19 {
        background-image: url("../img/wallhaven-zmkwmv_1920x1080.png");
    }

    .test20 {
        background-image: url("../img/zytd.jpg");
    }


    .routerview {
        width: 100%;
        height: 100%
    }

    .el-aside {
        background: transparent;
        height: 100%;
        padding: 0px;
    }

    .el-menu {
        border-right: 0 !important;
    }

    .el-submenu_title {
        background: transparent;
        margin-inside: 0px;
        width: 200px;
    }

    .menu-item {
        background-color: rgb(48, 65, 86);
        width: 100%;
    }

    .header {
        /*background-color: #5abaff;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 0px;
        box-sizing: border-box;
        margin-bottom: 0px;
        box-shadow: 1px 1px 5px rgba(132, 206, 246, 0);
    }

    header.el-header {
        padding: 0px 0px;
    }

    span.el-breadcrumb__inner.is-link, .el-breadcrumb__inner a, span.el-breadcrumb__item:last-child .el-breadcrumb__inner {
        color: rgba(256, 256, 256, .7);
    }
</style>

<style lang="less">
    //设置了默认左边框为白色
    .el-submenu .el-submenu__title {
        border-left: #304156 solid 6px;
    }

    //设置鼠标悬停时el-submenu的样式
    .el-submenu .el-submenu__title:hover {
        border-left: #5abaff solid 6px !important;
        background-color: #182e56 !important;
        color: #38B2FF !important;

        i {
            color: #38B2FF;
        }
    }
</style>
<style lang="less" scoped>
    //设置了默认左边框为白色
    .el-menu-item {
        border-left: #304156 solid 6px;
    }

    //设置鼠标悬停时el-menu-item的样式
    .el-menu-item:hover {
        border-left: #5abaff solid 6px !important;
        background-color: #182e56 !important;
        color: #38B2FF !important;
        //less语法，实现鼠标悬停时icon变色
        i {
            color: #38B2FF;
        }
    }

    //设置选中el-menu-item时的样式
    .el-menu-item.is-active {
        border-left: #33A2EF solid 6px !important;
        background-color: #182e56 !important;
        color: #38B2FF !important;
    }

</style>
<style scoped>

    .el-aside, .test {
        overflow-y: scroll;
    }

    ::-webkit-scrollbar {
        display: none;
    }
</style>
<style>
    /* 表格鼠标悬浮时的样式（高亮） */
    /*.el-table--enable-row-hover .el-table__body tr:hover {*/
    /*    background: rgb(184, 224, 250);*/
    /*    border: 1px solid #313463;*/
    /*}*/
    /*表格鼠标悬停的样式（背景颜色）*/
    .el-table tbody tr:hover > td {
        background-color: rgba(35, 29, 37, .77) !important;
    }
</style>




